<template>
    <div class="dashboard-box">
        <div class="welcome-tps">
            欢迎使用阳光沙滩博客系统
        </div>
        <div class="web-site-info-box">
            <el-row :gutter="20">
                <el-col :span="6">
                    <div class="gird-content ">
                        <div class="web-info-title">访问总量:</div>
                        <div class="web-info-number"> {{ viewCount }}</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="gird-content ">
                        <div class="web-info-title">注册用户:</div>
                        <div class="web-info-number"> {{ userCount }}</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="gird-content ">
                        <div class="web-info-title">文章总数:</div>
                        <div class="web-info-number"> {{ articleCount }}</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <div class="gird-content ">
                        <div class="web-info-title">评论总数:</div>
                        <div class="web-info-number"> {{ commentCount }}</div>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="dashboard-bottom-part">
            <el-row :gutter="10">
                <el-col :span="12">
                    <div class="gird-content ">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>最新评论</span>
                                <el-button style="float: right; padding: 3px 0"
                                           type="text"
                                           @click="toCommentMorePage()">更多
                                </el-button>
                            </div>
                            <el-table
                                v-loading="loading"
                                :data="comments"
                                style="width: 100%">
                                <el-table-column
                                    prop="content"
                                    label="内容"
                                    width="300">
                                </el-table-column>
                                <el-table-column
                                    prop="name"
                                    label="用户头像"
                                    width="50">
                                    <template slot-scope="scope">
                                        <el-avatar :src="scope.row.userAvatar"></el-avatar>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    prop="userName"
                                    label="用户名"
                                    width="100">
                                </el-table-column>
                            </el-table>
                        </el-card>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="gird-content ">
                        <el-card class="box-card">
                            <div slot="header" class="clearfix">
                                <span>快捷操作</span>
                            </div>
                            <div>
                                <el-link class="el-icon-edit" type="primary" href="/#/content/post-article"
                                         :underline="false">写文章
                                </el-link>
                            </div>
                            <div>
                                <el-link class="el-icon-paperclip" type="info" href="/#/content/manage-article"
                                         :underline="false">文章管理
                                </el-link>
                            </div>
                            <div>
                                <el-link class="el-icon-s-comment" ctype="success" href="/#/content/manage-comment"
                                         :underline="false">评论管理
                                </el-link>
                            </div>
                            <div>
                                <el-link class="el-icon-picture" type="primary" href="/#/content/manage-image"
                                         :underline="false">图片管理
                                </el-link>
                            </div>
                        </el-card>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
import {getArticleCount} from "@/api/article-admin-api";
import {success_code} from "@/utils/ResponseState";
import {getCommentCount, listComments} from "@/api/comment-admin-api";
import {getUserCount} from "@/api/userApi";
import {getWebSizeCount} from "@/api/web-size-info-admin-api";

export default {
    name: "index",

    data() {
        return {
            comments: [],
            viewCount: 0,
            commentCount: 0,
            articleCount: 0,
            userCount: 0,
            loading: false
        }
    },
    methods: {
        initData() {
            getArticleCount().then((result) => {
                if (result.code === success_code) {
                    this.articleCount = result.data;
                } else {
                    this.$message.error(result.message)
                }
            });

            getCommentCount().then((result) => {
                if (result.code === success_code) {
                    this.commentCount = result.data;
                } else {
                    this.$message.error(result.message)
                }
            });

            getUserCount().then((result) => {
                if (result.code === success_code) {
                    this.userCount = result.data;
                } else {
                    this.$message.error(result.message)
                }
            });

            getWebSizeCount().then((result) => {
                if (result.code === success_code) {
                    this.viewCount = result.data.value;
                } else {
                    this.$message.error(result.message)
                }
            });

            this.listLastComment();
        },
        toCommentMorePage() {
            this.$router.push({
                path: "/content/manage-comment"
            })
        },
        listLastComment() {
            this.loading = true;
            listComments(1, 5).then(result => {
                if (result.code === success_code) {
                    this.comments = result.data.content;
                } else {
                    this.$message.error("获取评论列表失败");
                }
            });

            this.loading = false;
        }
    },
    mounted() {
        this.initData();
    }
}
</script>

<style scoped>
.gird-content {
    border-radius: 4px;
    height: 150px;
    box-shadow: 0 1px 10px #d4d4d4
}

.web-info-title {
    padding: 20px;
    font-size: 20px;
}

.dashboard-bottom-part {
    line-height: 36px;
    margin-top: 10px;
}

.web-info-number {
    text-align: center;
    color: #66ccff;
    font-size: 40px;
    font-weight: 600;
}

.welcome-tps {
    padding: 20px;
    font-size: 20px;
}

.dashboard-box {
    min-height: 700px;
}

.fast-way-list {

}
</style>